<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Rain CSS > Buttons</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/> 
<!--[if lte IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> 
<link rel="stylesheet" href="icomoon/style.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/rain.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/icon.css" type="text/css" media="all"/>
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>

<body class="body">
	<div class="header headerBlue">
  	<nav class="lsn posr clearfix">
    	<a href="http://www.webdevelopmentmachine.com" class="headerLink headerLinkBlue l pr pl ib tdn">首页home</a>
    	<a href="http://www.webdevelopmentmachine.com/blog" class="headerLink headerLinkBlue l pr pl ib tdn">博客blog</a>
    	<a href="http://www.webdevelopmentmachine.com/demo/game.html" class="headerLink headerLinkBlue l pr pl ib tdn">游戏game</a>
    </nav>
  </div>
	<div class="headerM headerGrey">
  	<div class="container posr">
    	<div class="l"><a class="tdn block ptll fsxxl" href="index.html">Rain CSS</a></div>
    </div>
  </div>
  
	<div class="container mt"> 
<div class="content">
    	<div class="sidebar l posr">
      	<h2 class="category">使用css2的按钮</h2>
      	<p>这一部分的按钮例子使用css2来创建样式,可以使用w-数值来改变宽度,也可以使用h-数值来改变高度.</p>
      	<h2 class="category">Buttons with CSS2</h2>
      	<p>This part buttons example use css2.The button has only use special class w-number change width or use h-number change height.</p>
      </div>
      <div class="main mainRight posr">
    	<h1>默认按钮 Default Buttons</h1>
        <form method="post" action="" id="dummy">
          <fieldset>
            <legend>按钮示例 Sample Buttons</legend>  
            <p class="pb">
              <input type="button" value="button"/>
              <input type="button" class="h-2" value="button"/>
              <input type="button" class="h-3" value="button"/>
              <input type="button" class="hs ws" value="button"/>
              <input type="button" class="hm wm" value="button"/>
              <input type="button" class="hl wl" value="button"/>
              <input type="button" class="hll wll" value="button"/>
            </p>
<pre class="border bglgrey ps">
&lt;input type="button" value="button"/&gt;
&lt;input type="button" class="h-2" value="button" /&gt;
&lt;input type="button" class="h-3" value="button" /&gt;
&lt;input type="button" class="hs ws" value="button" /&gt;
&lt;input type="button" class="hm wm" value="button" /&gt;
&lt;input type="button" class="hl wl" value="button" /&gt;
&lt;input type="button" class="hll wll" value="button" /&gt;
</pre>
          </fieldset>
        </form>
      </div>
      <hr/> 
    </div>

    <div class="pt">
        <div class="sidebar l posr">
            <h2 class="category">CSS3按钮</h2>
            <p>这部分的按钮添加css3特效,添加圆角,渐变,边框线和颜色相关的样式类</p>
            <h2 class="category">Buttons with CSS3</h2>
            <p>This part buttons add css3 effects,add the round,gradient,border,and color related classes</p>
        </div>

        <div class="main mainRight posr">
            <h1>CSS3按钮 CSS3 Buttons</h1>
            <form method="post" action="" id="dummy">
                <fieldset>
                    <legend>按钮示例 Sample Buttons</legend>
                    <p class="pt pb">
                        <input type="button" class="hl rounds ggrey bgrey_2 btn greybtn" value="button"/>
                        <input type="button" class="hl rounds gb btn bluebtn" value="button"/>
                        <input type="button" class="hl rounds gg btn greenbtn" value="button"/>
                        <input type="button" class="hl rounds gr btn redbtn" value="button"/>
                        <input type="button" class="hl rounds gc btn cyanbtn" value="button"/>
                        <input type="button" class="hl  rounds gy btn yellowbtn" value="button"/>
                    </p>
<pre class="border bglgrey ps">
&lt;input type="button" class="hs rounds ggrey bgrey_2 btn greybtn" value="button" /&gt;
&lt;input type="button" class="hl rounds gb btn bluebtn" value="button" /&gt;
&lt;input type="button" class="hl rounds gg btn greenbtn" value="button" /&gt;
&lt;input type="button" class="hl rounds gr btn redbtn" value="button" /&gt;
&lt;input type="button" class="hl rounds gc btn cyanbtn" value="button" /&gt;
&lt;input type="button" class="hl  rounds gy btn yellowbtn" value="button" /&gt;
</pre>
                    <p class="pt pb"> 
                        <input type="button" class="hl wm rounds gb btn bluebtn" value="button"/>
                        <input type="button" class="hl wl rounds gg btn greenbtn" value="button"/>
                        <input type="button" class="hl wll rounds gr btn redbtn" value="button"/>
                        <input type="button" class="hl w-15  rounds gc btn cyanbtn" value="button"/>
                        <input type="button" class="hl w-16  rounds gy btn yellowbtn" value="button"/>
                    </p>
<pre class="border bglgrey ps">
&lt;input type="button" class="hl ws rounds ggrey bgrey_2 btn greybtn" value="button"/&gt;
&lt;input type="button" class="hl wm rounds gb btn bluebtn" value="button"/&gt;
&lt;input type="button" class="hl wl rounds gg btn greenBtn" value="button"/&gt;
&lt;input type="button" class="hl wll rounds gr btn redbtn" value="button"/&gt;
&lt;input type="button" class="hl w-15  rounds gc btn cyanbtn" value="button"/&gt;
&lt;input type="button" class="h-6 w-16  rounds gy btn yellowbtn" value="button"/&gt;
</pre>
                </fieldset>

			  	<fieldset>
					<legend>下拉菜单按钮 Dropdown Buttons</legend>  
					<div class="posr pb">
						<button class="posr ps rounds ggrey bgrey_2 btn greybtn">
							button
							<span class="trianglegt mts mls ib"></span>
						</button>
						<ul class="nolp pts pbs mts lsn bottom w-25 last border rounds sogrey">
						  <li><a class="hoverb hovercw block ps tdn" href="#">Action</a></li>
						  <li><a class="hoverb hovercw block ps tdn" href="#">Another action</a></li>
						  <li><a class="hoverb hovercw block ps tdn" href="#">Something else here</a></li>
						  <li class="bt"><a class="hoverb hovercw block ps tdn" href="#">Separated link</a></li>
						</ul>

					</div>
<pre class="border bglgrey ps">
&lt;button class="posr ps rounds ggrey borderGrey_2 btn greybtn"&gt;
	button
	&lt;span class="trianglegt mts mls ib"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="nolp pts pbs mts lsn bottom w-25 last border rounds sogrey"&gt;
	&lt;li&gt;
	&lt;a class="hoverb hovercw block ps tdn" href="#"&gt;Action&lt;/a&gt;
	&lt;/li&gt;
	...
	&lt;li class="bt"&gt;
	&lt;a class="hoverb hovercw block ps tdn" href="#"&gt;Separated link&lt;/a&gt;
	&lt;/li&gt;
&lt;/ul&gt;
</pre>
					
					<div class="posr pb pt">
						<button class="posr ps rounds gb btn bluebtn">
							button
							<span class="trianglewt mts mls ib"></span>
						</button>
						<ul class="nolp pts pbs mts lsn bottom w-25 last border rounds sogrey">
						  <li><a class="hoverb hovercw block ps tdn" href="#">Action</a></li>
						  <li><a class="hoverb hovercw block ps tdn" href="#">Another action</a></li>
						  <li><a class="hoverb hovercw block ps tdn" href="#">Something else here</a></li>
						  <li class="bt"><a class="hoverb hovercw block ps tdn" href="#">Separated link</a></li>
						</ul>
					</div>
<pre class="border bglgrey ps">
&lt;button class="posr ps rounds ggrey borderGrey_2 btn greybtn"&gt;
	button
	&lt;span class="trianglewt mts mls ib"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="nolp pts pbs mts lsn bottom w-25 last border rounds sogrey"&gt;
	&lt;li&gt;
	&lt;a class="hoverb hovercw block ps tdn" href="#"&gt;Action&lt;/a&gt;
	&lt;/li&gt;
	...
	&lt;li class="bt"&gt;
	&lt;a class="hoverb hovercw block ps tdn" href="#"&gt;Separated link&lt;/a&gt;
	&lt;/li&gt;
&lt;/ul&gt;
</pre>

                                                                    <div class="posr pb pt">
                                                                            <div class="buttongroup posr clearfix">
                                                                                <button class="posr bright ib ps roundls gb btn bluebtn nolm norm">Action</button>
                                                                                <button class="posr nobl ib ps roundrs gb btn bluebtn nolm norm">
                                                                                <span class="trianglewt ib"></span></button>
                                                                            </div>
                                                                            <ul class="nolp pts pbs mts lsn bottom w-25 last border rounds sogrey">
                                                                                <li><a class="hoverb hovercw block ps tdn" href="#">Action</a></li>
                                                                                <li><a class="hoverb hovercw block ps tdn" href="#">Another action</a></li>
                                                                                <li><a class="hoverb hovercw block ps tdn" href="#">Something else here</a></li>
                                                                                <li class="bt"><a class="hoverb hovercw block ps tdn" href="#">Separated link</a></li>
                                                                            </ul>
                                                                    </div>
<pre class="border bglgrey ps">
&lt;div class="posr clearfix"&gt;
        &lt;button class="posr br ib l ps  roundls gb btn bluebtn"&gt;
        Action
        &lt;/button&gt;
        &lt;button class="posr nobl ib l ps roundrs gb btn bluebtn"&gt;
        	&lt;span class="triangleTopWhite ib"&gt;&lt;/span&gt;
        &lt;/button&gt;
&lt;/div&gt;
&lt;ul class="nolp pts pbs mts lsn bottom w-25 last border rounds sogrey"&gt;
        &lt;li&gt;
        &lt;a class="hoverb hovercw block ps tdn" href="#"&gt;Action&lt;/a&gt;
        &lt;/li&gt;
        ...
        &lt;li class="bt"&gt;
        &lt;a class="hoverb hovercw block ps tdn" href="#">Separated link&lt;/a&gt;
        &lt;/li&gt;
&lt;/ul&gt;
</pre>
				</fieldset> 
			  	</form>
        </div><hr/>
		</div>
		<div class="paddingTop">
			<div class="sidebar l posr">
				<h2 class="category">移动端按钮</h2>
				<p>这部分的按钮用于移动设备,如手机和pad.</p>
				<h2 class="category">Buttons for Mobile</h2>
				<p>This part buttons are use for mobile device,like phone and pad.</p>
			</div>
			<div class="main mainRight posr">
				<h1>移动端按钮 Buttons for Mobile</h1>
				<fieldset>
					<legend>基本按钮 Basic Buttons</legend>  
					<p>
						<a href='#' class='round-10 ggrey btn greybtn block tdn p tac'>button</a>
					</p><br/>
					<p>
						<a href='#' class='round-10 gb btn bluebtn block tdn p tac'>button</a>
					</p><br/>
					<p>
						<a href='#' class='round-10 gg btn greenbtn block tdn p tac'>button</a>
					</p><br/>
					<p>
						<a href='#' class='round-10 gr btn redbtn block tdn p tac'>button</a>
					</p><br/>
					<p>
						<a href='#' class='round-10 gc btn cyanbtn block tdn p tac'>button</a>
					</p><br/>
					<p>
						<a href='#' class='round-10 gy btn yellowbtn block tdn p tac'>button</a>
					</p>
				</fieldset>
				<fieldset>
					<legend>带图标的基本按钮 Basic Buttons with icon</legend>  
					<p>
						<a href='#' class='round-10 ggrey btn greybtn block tdn p tac posr'>
						<span class="iconbtn-left micon ib  tac posa"><span class="imooc-icon fs14px">&#xea42;</span></span>
						button
						</a>
					</p><br/>
					<p>
						<a href='#' class='round-10 ggrey btn greybtn block tdn p tac posr'>
						<span class="micon ib  tac iconbtn-right posa"><span class="imooc-icon fs14px">&#xea42;</span></span>
						button
						</a>
					</p> 
				</fieldset>
				<fieldset>
					<legend>内联按钮 Inline Buttons</legend>  
					<p>
						<a href='#' class='ib round-10 ggrey btn greybtn tdn p tac'>button</a>
						<a href='#' class='ib round-10 gb btn bluebtn tdn p tac'>button</a>
						<a href='#' class='ib round-10 gg btn greenbtn tdn p tac'>button</a>
						<a href='#' class='ib round-10 gr btn redbtn tdn p tac'>button</a>
						<a href='#' class='ib round-10 gc btn cyanbtn tdn p tac'>button</a>
						<a href='#' class='ib round-10 gy btn yellowbtn tdn p tac'>button</a>
					</p>
				</fieldset>
				<fieldset>
					<legend>带图标的内联按钮 Inline Buttons with Icon</legend>  
					<p>
						<a href='#' class='ib round-10 ggrey btn greybtn tdn p tac'>
						<span class="micon ib tac"><span class="imooc-icon fs14px">&#xea42;</span></span>
						button</a>
						<a href='#' class='ib round-10 gb btn bluebtn tdn p tac'>
						<span class="micon ib tac"><span class="imooc-icon fs14px">&#xea42;</span></span>
						button</a>
						<a href='#' class='ib round-10 gg btn greenbtn tdn p tac'>
						<span class="micon ib tac"><span class="imooc-icon fs14px">&#xea42;</span></span>
						button</a>
						<a href='#' class='ib round-10 gr btn redbtn tdn p tac'>
						<span class="micon ib tac"><span class="imooc-icon fs14px">&#xea42;</span></span>
						button</a>
						<a href='#' class='ib round-10 gc btn cyanbtn tdn p tac'>
						<span class="micon ib tac"><span class="imooc-icon fs14px">&#xea42;</span></span>
						button</a>
						<a href='#' class='ib round-10 gy btn yellowbtn tdn p tac'>
						<span class="micon ib tac"><span class="imooc-icon fs14px">&#xea42;</span></span>
						button</a>
					</p>
				</fieldset>
				<fieldset>
					<legend>垂直按钮组 Vertical buttons group</legend>  
					<div class='vgroup round-10 oh b'>
						<a href='#' class='ggrey btn greybtn block tdn p tac'>button</a>
						<a href='#' class='ggrey btn greybtn block tdn p tac'>button</a>
						<a href='#' class='ggrey btn greybtn block tdn p tac'>button</a>
					</div>
					<div class='vgroup oh b mt'>
						<a href='#' class='ggrey btn greybtn block tdn p tac'>button</a>
						<a href='#' class='ggrey btn greybtn block tdn p tac'>button</a>
						<a href='#' class='ggrey btn greybtn block tdn p tac'>button</a>
					</div>
					<div class='vgroup round-10 oh b mt'>
						<a href='#' class='ggrey btn greybtn block tdn p tac posr'>
						<span class="micon iconbtn-right ib  tac posa"><span class="imooc-icon fs14px">&#xea42;</span></span>
						button
						</a>
						<a href='#' class='ggrey btn greybtn block tdn p tac posr'>
						<span class="micon iconbtn-right ib  tac posa"><span class="imooc-icon fs14px">&#xea42;</span></span>
						button
						</a>
						<a href='#' class='ggrey btn greybtn block tdn p tac posr'>
						<span class="micon iconbtn-right ib  tac posa"><span class="imooc-icon fs14px">&#xea42;</span></span>
						button
						</a>
					</div>
				</fieldset>
				<fieldset>
					<legend>水平按钮组 Horizontal buttons group</legend> 
					<div class='hgroup round-10 oh ib b clearfix'>
						<a href='#' class='ggrey btn greybtn ib tdn p tac l fl'>button</a>
						<a href='#' class='ggrey btn greybtn ib tdn p tac l fl'>button</a>
						<a href='#' class='ggrey btn greybtn ib tdn p tac l fl'>button</a>
					</div><br/>
					<div class='hgroup round-10 oh ib b clearfix'>
						<a href='#' class='ggrey btn greybtn ib tdn p tac posr l fl'>
						  <span class="imooc-icon fs14px">&#xea42;</span>
						</a>
						<a href='#' class='ggrey btn greybtn ib tdn p tac posr l fl'>
                                                                            <span class="imooc-icon fs14px">&#xea42;</span>
						</a>
						<a href='#' class='ggrey btn greybtn ib tdn p tac posr l fl'>
                                                                            <span class="imooc-icon fs14px">&#xea42;</span>
						</a>
					</div>
				</fieldset>
			</div>

    <footer class="footer socialFooter c borderTop">
      <p class="ps">Maintained by the <a href="https://github.com/rainzhai" class="blue">RainZhai</a>.</p>
      <p class="ps">Code licensed under <a rel="license" class="blue" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license"  class="blue" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p> 
    </footer>  
		</div>
	</div>
</body>
</html>